<%@page import="javax.xml.transform.Result"%>
<%@ page language="java" import="java.util.*" import="java.sql.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="blog.anchen8.net" />
	<title>毕业生，你的选择</title>
    <link rel="stylesheet" type="text/css" href="../css/MyImage.css" />
    <script src="../js/jQuery1.82.js" type="text/javascript"></script>
    <script src="../js/jquery.form.js" type="text/javascript"></script>
    <script type="text/javascript">
        function createMain(){
            var _scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
            var _scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
                document.getElementById("main").style.left=(_scrollWidth-950)/2+"px";
               // document.getElementById("m").style.height=_scrollHeight+"px";
        }
        function naviover(val){
            document.getElementById(val).style.backgroundColor="#E1DACF";
        }
        function naviout(val){
            document.getElementById(val).style.backgroundColor="#C5C5C5";
        }
        $(document).ready(function() {
			/*	2nd example	*/
			
			$("#menu2 li a").wrapInner( '<span class="out"></span>' );
			
			$("#menu2 li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menu2 li a").hover(function() {
				$(".out",	this).stop().animate({'top':	'45px'},	200); // move down - hide
				$(".over",	this).stop().animate({'top':	'0px'},		200); // move down - show

			}, function() {
				$(".out",	this).stop().animate({'top':	'0px'},		200); // move up - show
				$(".over",	this).stop().animate({'top':	'-45px'},	200); // move up - hide
			});

		});
        function showEdit(edit,click){
            document.getElementById(edit).style.display='block';
            document.getElementById(click).style.display='none';
        }
        function showClick(edit,click){
            document.getElementById(edit).style.display='none';
            document.getElementById(click).style.display='block';
        }
        function createAlbum(){
            var msgw,msgh,bordercolor;
            msgw=472;//提示窗口的宽度
            msgh=200;//提示窗口的高度
            titleheight=25 //提示窗口标题高度
            bordercolor="#FF3C00";//提示窗口的边框颜色
            titlecolor="#D2CECE";//提示窗口的标题颜色
            var scrollH=document.body.scrollTop;
    
            var sWidth,sHeight;
            //sWidth=document.body.offsetWidth; //得出当前屏幕的宽
            sWidth=document.body.clientWidth;//BODY对象宽度

            //sHeight=screen.height;//得到当前屏幕的高
            //sHeight=document.body.clientHeight;//BODY对象高度
            if (window.innerHeight && window.scrollMaxY){
                sHeight = window.innerHeight + window.scrollMaxY;
            }
            else if (document.body.scrollHeight > document.body.offsetHeight){
                sHeight = document.body.scrollHeight;
            }else{
                sHeight = document.body.offsetHeight;
            }//以上得到整个屏幕的高

            var bgObj=document.createElement("div");//创建一个div对象
            bgObj.setAttribute('id','bgDiv');//可以用bgObj.id="bgDiv"的方法，是为div指定属性值
            bgObj.style.position="relative";//把bgDiv这个div绝对定位
            bgObj.style.background="#fff";//背景颜色
            bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//ie浏览器透明度设置
            bgObj.style.opacity="0.6";//透明度(火狐浏览器中)
            bgObj.style.marginLeft="0px";//左边为0
            bgObj.style.marginTop="0px";//左边为0
            bgObj.style.width=sWidth + "px";//宽(上面得到的屏幕宽度)
            bgObj.style.height=sHeight + "px";//高(上面得到的屏幕高度)
            bgObj.style.zIndex = "100";//层的z轴位置
            document.body.appendChild(bgObj);
    
            var msgObj=document.createElement("div")//创建一个div对象
            msgObj.setAttribute("id","msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值
            msgObj.setAttribute("align","center");//为div的align赋值
            msgObj.style.background="white";//背景颜色为白色
            msgObj.style.border="1px solid #AAA";//边框属性，颜色在上面已经赋值
            msgObj.style.position = "absolute";//绝对定位
            msgObj.style.left = (sWidth-msgw)/2+"px";//从左侧开始位置
            msgObj.style.top = (scrollH+150)+"px";//从上部开始位置
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
            //msgObj.style.marginLeft = "-225px";//左外边距
            //msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";//上外边距
            msgObj.style.width = msgw + "px";//提示框的宽(上面定义过)
            msgObj.style.height =msgh + "px";//提示框的高(上面定义过)
            msgObj.style.textAlign = "center";//文本位置属性，居中。
            msgObj.style.lineHeight ="25px";//行间距
            msgObj.style.zIndex = "101";//层的z轴位置
           	msgObj.innerHTML="<label id='albumexist'>相册已存在</label>";
            var title=document.createElement("h4");//创建一个h4对象
            title.setAttribute("id","msgTitle");//为h4对象填加标题
            title.setAttribute("align","left");//文字对齐方式
            title.style.margin="0";//浮动
            title.style.padding="5px";//浮动
            title.style.background="#F3F3F3";//背景颜色
            title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
            title.style.opacity="0.75";//透明
            //title.style.border="1px solid " + bordercolor;//边框
            title.style.font="13px Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
            title.style.fontWeight="bold";
            title.style.color="#000";//文字颜色
            title.style.cursor="pointer";//鼠标样式
            title.style.borderBottom="1px solid #AAA";
            title.innerHTML="创建相册";//显示的文字
            var bottom=document.createElement("div");
            bottom.setAttribute("id","bottom");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值
            bottom.style.width="100%";
            bottom.style.height="25px";
            bottom.style.backgroundColor="#f3f3f3";
            bottom.style.borderTop="1px solid #AAA";
            bottom.style.position = "absolute";//绝对定位
            bottom.style.bottom="0px";
            bottom.style.zIndex = "102";//层的z轴位置
            var bottomstr="";
            
            bottomstr+="<input type='button' name='createCancel' value='取消' class='Albumbtn' id='c'/><input type='button' name='createCancel' value='上传' class='Albumbtn1' id='cc'/>";
            bottom.innerHTML=bottomstr;
            var AlbumName=document.createElement("div");
            AlbumName.setAttribute("id","AlbumName");
            AlbumName.setAttribute("align","left");//文字对齐方式
            AlbumName.style.width="80%";
            AlbumName.style.height="30px";
            AlbumName.style.position="relative";
            AlbumName.style.marginLeft="10%";
            AlbumName.style.marginTop="20px";
            AlbumName.style.fontSize="13px";
            var inputstr="";
            inputstr+="相册名称：<input id='albumname' type='text' name='aName' class='Albuminput'/>";
            AlbumName.innerHTML=inputstr;
            var AlbumDes=document.createElement("div");
            AlbumDes.setAttribute("id","AlbumDes");
            AlbumDes.setAttribute("align","left");//文字对齐方式
            AlbumDes.style.width="80%";
            AlbumDes.style.height="200px";
            AlbumDes.style.position="relative";
            AlbumDes.style.marginLeft="10%";
            AlbumDes.style.marginTop="10px";
            AlbumDes.style.fontSize="13px";
            var textstr="";
            textstr+="相册描述:<textarea id='description' class='Albumtext' name='description'></textarea>";
            AlbumDes.innerHTML=textstr;
            bgObj.onclick=function(){
                document.body.removeChild(bgObj);//移除遮罩层
                document.getElementById("msgDiv").removeChild(title);//在提示框中移除标题
                document.body.removeChild(msgObj);//移除提示框
            }
            document.body.appendChild(msgObj);//在body中画出提示框层
            document.getElementById("msgDiv").appendChild(title);//在提示框中增加标题
            document.getElementById("msgDiv").appendChild(bottom);//在提示框中增加标题
            document.getElementById("msgDiv").appendChild(AlbumName);
            document.getElementById("msgDiv").appendChild(AlbumDes);
            var txt=document.createElement("img");
            /*txt.src=image.src;  
            txt.style.width="472px";
            txt.style.height="504px";
            txt.setAttribute("id","msgTxt");//为p属性增加id属性
            //txt.innerHTML=str;//把传进来的值赋给p属性*/
            document.getElementById("msgDiv").appendChild(txt);//把p属性增加到提示框里
            
            $(document).ready(function() {
            	
            	    $("#albumexist").hide();
            	    
            	    $("#albumname").focus(function(){
            	    	$("#albumexist").hide();
            	    });
            	    $("#albumname").blur(function(){
            	    	$.post("/Bys-Website/CheckData",{
            	    		method:2,
            	    		albumname: $("#albumname").val()
            	    	},function(data){
            	    		if(data=="have data"){
            	    			$("#albumexist").show();
            	    		}
            	    	});
            	    });
            	
        			$("#cc").click(function() {
        				if($("#albumname").val()!=""&&$("#description").val()!=""){
        				$.post("CreateAlbumServlet", {
        					AlbumName : $("#albumname").val(),
        					AlbumDescription : $("#description").val()
        				}, function(data) {
        					if(data=="create failed"){
        						alert(data);
        						$("#albumname").text("");
        						$("#description").text("");
        					}
        					if(data=="create success"){
        						document.body.removeChild(bgObj);//移除遮罩层
        		                document.getElementById("msgDiv").removeChild(title);//在提示框中移除标题
        		                document.body.removeChild(msgObj);//移除提示框
        		                window.location.reload();
        					}
        				});
        				}
        			});
                  
        	});
        }
        function uploadPic(counts){
            var msgw,msgh,bordercolor;
            msgw=472;//提示窗口的宽度
            msgh=230;//提示窗口的高度
            titleheight=25 //提示窗口标题高度
            bordercolor="#FF3C00";//提示窗口的边框颜色
            titlecolor="#D2CECE";//提示窗口的标题颜色
            var scrollH=document.body.scrollTop;
    
            var sWidth,sHeight;
            //sWidth=document.body.offsetWidth; //得出当前屏幕的宽
            sWidth=document.body.clientWidth;//BODY对象宽度

            //sHeight=screen.height;//得到当前屏幕的高
            //sHeight=document.body.clientHeight;//BODY对象高度
            if (window.innerHeight && window.scrollMaxY){
                sHeight = window.innerHeight + window.scrollMaxY;
            }
            else if (document.body.scrollHeight > document.body.offsetHeight){
                sHeight = document.body.scrollHeight;
            }else{
                sHeight = document.body.offsetHeight;
            }//以上得到整个屏幕的高

            var bgObj=document.createElement("div");//创建一个div对象
            bgObj.setAttribute('id','bgDiv');//可以用bgObj.id="bgDiv"的方法，是为div指定属性值
            bgObj.style.position="relative";//把bgDiv这个div绝对定位
            bgObj.style.background="#fff";//背景颜色
            bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//ie浏览器透明度设置
            bgObj.style.opacity="0.6";//透明度(火狐浏览器中)
            bgObj.style.marginLeft="0px";//左边为0
            bgObj.style.marginTop="0px";//左边为0
            bgObj.style.width=sWidth + "px";//宽(上面得到的屏幕宽度)
            bgObj.style.height=sHeight + "px";//高(上面得到的屏幕高度)
            bgObj.style.zIndex = "100";//层的z轴位置
            
            
            var msgObj=document.createElement("div")//创建一个div对象
            msgObj.setAttribute("id","msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值
            msgObj.setAttribute("align","center");//为div的align赋值
            msgObj.style.background="white";//背景颜色为白色
            msgObj.style.border="1px solid #AAA";//边框属性，颜色在上面已经赋值
            msgObj.style.position = "absolute";//绝对定位
            msgObj.style.left = (sWidth-msgw)/2+"px";//从左侧开始位置
            msgObj.style.top = (scrollH+150)+"px";//从上部开始位置
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
            //msgObj.style.marginLeft = "-225px";//左外边距
            //msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";//上外边距
            msgObj.style.width = msgw + "px";//提示框的宽(上面定义过)
            msgObj.style.height =msgh + "px";//提示框的高(上面定义过)
            msgObj.style.textAlign = "center";//文本位置属性，居中。
            msgObj.style.lineHeight ="25px";//行间距
            msgObj.style.zIndex = "101";//层的z轴位置
            document.body.appendChild(msgObj);
    		var str="";
    		str+="<form id='apply' action='UploadFile'  method='post' enctype='multipart/form-data'>";
            //msgObj.setAttribute("align","center");//为div的align赋值
           	str+="<h4 id='msgTitle'>上传照片</h4>";
            str+="<div id='selectFile'>";
            str+="选择相册：<select id='ab' name='album' index=33>";
           for(var k=0;k<counts;k++){
        	   var nameId="name"+k;
        	   //var name=document.getElementById(nameId).dir;
        	   var name=$("#"+nameId).attr("dir");
        	   str+="<option>";
        	   str+=name;
        	   str+="</option>";
            }
            str+="</select>";
            str+="</div>";
            str+="<div id='AlbumName'>";
            str+="选择照片：<input id='imgs' type='file' name='aName' class='Albuminput' multiple/></div>";
            str+="<div id='AlbumDes'>";
            str+="照片描述:<textarea id='des' class='Albumtext' name='description'></textarea></div>";
            str+="<input type='hidden' name='modifyhead' value='null'>";
            str+="<div id='bottom'><label id='progress'>正在上传...</label>";
            str+=" <input type='button' name='createCancel' value='取消' class='Albumbtn'/>";
            str+="<input  type='submit' name='createOk' value='上传' class='Albumbtn1'/></div>";
            str+="</form>";
            msgObj.innerHTML=str;
            document.body.appendChild(bgObj);
            bgObj.onclick=function(){
                document.body.removeChild(bgObj);//移除遮罩层
                document.body.removeChild(msgObj);//移除遮罩层
                }
            $(document).ready(function() {
            	$("#progress").hide();
            	$(function (){  
            	    var options = {   
            	        success:    function(data){
            	        	$("#des").val("");
            	        	$("#imgs").val("");
            	        	$("#progress").text(data);
            	        }  
            	    };  
            	    $('#apply').submit(function(){
            	    	$("#progress").text("正在上传...");
            	    	$("#progress").show();
            	        $(this).ajaxSubmit(options);  
            	        return false;  
            	    });  
            	});  
              
    	});
        }
    </script>
</head>
<body class="body">
<jsp:useBean id="sql" scope="page" class="com.tzq.JAVABEAN.ConnectDB"/>
<%String userid = request.getParameter("userid");
if(userid==null){%>
	<jsp:forward page="/Public/PublicMainPage.jsp"></jsp:forward>
<%}%>
<%
String Sessionpid = null;
if(session.getAttribute("pid")!=null){
	Sessionpid=session.getAttribute("pid").toString();
}
boolean flag = userid.equals(Sessionpid);
ResultSet rsUserName = sql.executeQuery("select UserName from Userinfo where UserID="+userid+"");
String Uname = "";
if(rsUserName.next()){
	Uname  =rsUserName.getString("UserName");
}
 %>
    <div class="main" id="main">
        <span class="title"><%=Uname %>的空间</span>
        <div id="menu2" class="menu">
			<ul>
				<li id="info"><a href="/Bys-Website/PersonMainPage.jsp?userID=<%=userid%>">个人信息</a></li>
				<li id="video"><a href="/Bys-Website/PersonVideo/MyVideo.jsp?userid=<%=userid %>">个人视频</a></li>
				<li id="photo"><a href="/Bys-Website/PersonImage/MyImage.jsp?userid=<%=userid%>">个人相册</a></li>
				<li id="blog"><a href="/Bys-Website/PersonBlog/MyBlog.jsp?userid=<%=userid%>">个人博客</a></li>
				<li><a href="javascript:;">Contacts</a></li>
			</ul>
		</div>
        <div id="photode">
            <div class="phototitle">
                &nbsp;我的相册
                <%int counts=0; 
                ResultSet countSet= sql.executeQuery("select count(*) as B from ImageAlbum where UserID="+userid+"");
                	if(countSet.next()){
                		counts =countSet.getInt("B");
                	}%>
                <form>
                    <%if(flag){ %><input type="button" value="上传照片" class="inputupload" onclick="uploadPic(<%=counts%>)"/><%} %>
                    <%if(flag){ %><input type="button" value="创建相册" class="inputcreate" onclick="createAlbum()"/><%} %> 
                </form>
            </div>
            <div class="photolist">
                <ul>
                	<%
                	
                	int pId=1;//相册id号
                	ResultSet rsAlbum=sql.executeQuery("select AlbumName from ImageAlbum where UserID="+userid+"");  
                	while(rsAlbum.next()){
                		String photoId="photo"+pId;
                		String editId="edit"+pId;
                		String clickId="click"+pId;
                		
                		String nameId="name"+(pId-1);
                		pId++;
                		String albumname = rsAlbum.getString("AlbumName");
                		ResultSet rsImage=sql.executeQuery("select *,count(*) as total from Images where UploaderID="+userid+" and PhotoAlbumName='"+albumname+"' group by UploaderID,PhotoAlbumName "); 
                		if(rsImage.next())
                		{%>
					<li>
                    <div class="eachphoto" id="<%=photoId %>" onmouseover="showEdit(<%=editId %>,<%=clickId %>)" onmouseout="showClick(<%=editId %>,<%=clickId %>)">
						<a href="ShowImages.jsp?album=<%=albumname %>&userid=<%=userid  %> "><img alt="<%=rsImage.getString("UserImageName") %>" src="/Bys-Website/USERS/<%=userid %>/Images/Thumbnail/<%=rsImage.getString("ServerImageName") %>"></a>
						<div class="photoname" id="<%=nameId%>" dir="<%=albumname%>"><%=albumname %></div>
                        <div class="photoedit" id="<%=editId%>">
                                <a href="#">编辑</a>&nbsp;&nbsp;
                                <a href="#">删除</a>
                        </div>
                        <div class="photoclick" id="<%=clickId%>">含<%=rsImage.getString("total") %>张</div>
                    </div>
                    </li>
				<%}else{%>
				<li>
                    <div class="eachphoto" id="<%=photoId %>" onmouseover="showEdit(<%=editId %>,<%=clickId %>)" onmouseout="showClick(<%=editId %>,<%=clickId %>)">
						<a href="ShowImages.jsp?album=<%=albumname %>&userid=<%=userid  %>"><img alt="hahah" src="/Bys-Website/SourceImageFile/q.jpg" width="150px" height="120px"></a>
						<div class="photoname" id="<%=nameId%>" dir="<%=albumname%>"><%=albumname %></div>
                        <div class="photoedit" id="<%=editId%>">
                                <a href="#">编辑</a>&nbsp;&nbsp;
                                <a href="#">删除</a>
                        </div>
                        <div class="photoclick" id="<%=clickId%>">含0张</div>
                    </div>
                    </li>
				<%}%>
				<%} %>
                </ul>
                <div class="pgswitch">
                    <div class="pgpre"><a href="#">上一页</a></div>
                    <div class="pgnext"><a href="#">下一页</a></div>
                </div>
            </div> 
        </div>
    </div>
    <script>    
        createMain();
    </script>
    <div class="topbar">
        <div class="logo">
            <a href="/Bys-Website/Public/home.jsp">
            	<img src="/Bys-Website/SourceImageFile/toplogo.jpg"/>
            </a>
        </div>
        <div class="navi">
            <ul class="naviul">
                <li><a href="/Bys-Website/Public/Video.jsp" class="outli">视频</a></li>
				<li><a href="/Bys-Website/Public/Photo.jsp" class="outli">相册</a></li>
				<li><a href="/Bys-Website/Public/Blog.jsp" class="inli">博客</a></li>
            </ul>
        </div>
        <div class="loginfo">
            <ul class="loginfoul">
                <%if(session.getAttribute("pid")==null){%>
				<li><a href="/Bys-Website/Log_in.jsp">登录</a></li>
				<li><a href="/Bys-Website/Regist.jsp">注册</a></li>
			<%}else{%>
				<li><a href="../PersonMainPage.jsp?userID=<%=Sessionpid  %>"><%=session.getAttribute("username").toString()%></a></li>
				<li><a href="../LoginServlet?method=1">退出</a></li>
			<%}%>
            </ul>
        </div>
    </div>
    <%sql.closeConnection(); %>
</body>
</html>